<template>
  <div class="home-container">
    <div class="top-container">
      <el-card class="home-card">
        <template #header>
          <div>
            <span style="font-weight: bold; font-size: 20px; line-height: 30px">
              Welcome，{{ username }}！
            </span>
            <span style="margin-left: 10px; font-size: 14px; color: #646464">
              虽然工作是累人的，但想想每个月的薪水，你会发现自己是最贵的奴隶！
            </span>
          </div>
        </template>
        <div class="home-body">
          <div
            v-for="(item, index) in allData"
            :key="item.name"
            class="data-item"
          >
            <div :class="['icon', colorClass(index)]">
              <img
                :src="`/public/icons/${item.icon}.png`"
                alt=""
                style="width: 100%; height: 100%; padding: 13px"
              />
            </div>
            <div class="data-show">
              <p style="color: #646464; font-size: 13px">{{ item.name }}</p>
              <p style="font-weight: bold; font-size: 27px">{{ item.num }}</p>
            </div>
          </div>
        </div>
        <div class="echarts-bom" ref="chart"></div>
      </el-card>
      <el-card class="quickEntry-card">
        <template #header>
          <span style="font-weight: bold; font-size: 16px; line-height: 30px">
            快速入口
          </span>
        </template>
        <div class="quickEntry-body">
          <div
            v-for="item in quickEntryData"
            :key="item"
            class="quickEntry-item"
          >
            <el-icon color="#1B9AEE" size="60"><Menu /></el-icon>
            <p style="color: #646464; font-size: 13px">{{ item }}</p>
          </div>
        </div>
      </el-card>
    </div>
    <div class="center-container">
      <el-card class="defect-card">
        <template #header>
          <span style="font-weight: bold; font-size: 16px">缺陷占比</span>
        </template>
        <div class="defect-body" ref="defectChart"></div>
      </el-card>
      <el-card class="unqualified-card">
        <template #header>
          <span style="font-weight: bold; font-size: 16px">工序不合格比例</span>
        </template>
        <div class="unqualified-body" ref="unqualifiedChart"></div>
      </el-card>
      <el-card class="quality-card">
        <template #header>
          <span style="font-weight: bold; font-size: 16px">生产质量统计</span>
        </template>
        <div class="quality-body" ref="qualityChart"></div>
      </el-card>
    </div>
    <div class="bottom-container">
      <el-card class="process-card">
        <template #header>
          <span style="font-weight: bold; font-size: 16px; line-height: 30px">
            生产进度
          </span>
        </template>
        <el-table :data="tableData" border>
          <el-table-column label="工单编号" align="center"></el-table-column>
          <el-table-column label="工单名称" align="center"></el-table-column>
          <el-table-column
            label="工单进度"
            align="center"
            width="250"
          ></el-table-column>
          <el-table-column label="产品名称" align="center"></el-table-column>
          <el-table-column label="产品编号" align="center"></el-table-column>
          <el-table-column label="规格型号" align="center"></el-table-column>
          <el-table-column label="单位" align="center"></el-table-column>
          <el-table-column label="需求日期" align="center"></el-table-column>
        </el-table>
      </el-card>
      <el-card class="notice-card">
        <el-menu class="el-menu-demo" mode="horizontal" style="height: 47px">
          <el-menu-item index="1">通知公告</el-menu-item>
          <el-menu-item index="2">系统消息</el-menu-item>
        </el-menu>
        <el-table :data="noticeTableData" border style="margin-top: 20px">
          <el-table-column label="消息内容" align="center"></el-table-column>
          <el-table-column label="接收时间" align="center"></el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
import useUserStore from "@/store/modules/User";

const userStore = useUserStore();
// mockData
let username = userStore.username;
let allData = ref([
  { name: "计划数量", num: 65615, icon: "homeIcon1" },
  { name: "工单数量", num: 65615, icon: "homeIcon2" },
  { name: "任务数量", num: 65615, icon: "homeIcon3" },
  { name: "报工数量", num: 65615, icon: "homeIcon4" },
  { name: "报工质检数量", num: 65615, icon: "homeIcon5" },
]);
let quickEntryData = ref([
  "生产计划",
  "生产工单",
  "生产任务",
  "来料检验",
  "出货检验",
  "产品入库",
  "采购入库",
  "生产领料",
  "销售出库",
  "BOM管理",
  "工艺路线",
  "通知公告",
]);
let tableData = ref([{}]);
let noticeTableData = ref([{}]);

const colorClass = (index: number) => {
  switch (index) {
    case 1:
      return "bg-fb6260";
    case 2:
      return "bg-ffa94c";
    case 3:
      return "bg-51d351";
    case 4:
      return "bg-7b63ea";
    default:
      return "";
  }
};
let chart = ref();
let defectChart = ref();
let unqualifiedChart = ref();
let qualityChart = ref();
onMounted(() => {
  let taskChart = echarts.init(chart.value);
  let defect_chart = echarts.init(defectChart.value);
  let unqualified_chart = echarts.init(unqualifiedChart.value);
  let quality_chart = echarts.init(qualityChart.value);
  let option = {
    title: {
      text: "任务统计",
      textStyle: {
        fontSize: 16,
      },
    },
    tooltip: {},
    legend: {
      data: ["任务数量"],
    },
    xAxis: {
      type: "category",
      data: [
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
        "星期日",
      ],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "任务数量",
        type: "bar",
        data: [15, 25, 10, 28, 12, 22, 8],
        itemStyle: {
          color: "#1b9aee",
        },
      },
    ],
  };
  let defectOption = {
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b} : {c} ({d}%)",
    },
    legend: {
      top: "5%",
      left: "center",
      data: ["缺陷一", "缺陷二", "缺陷三", "缺陷四", "缺陷五"],
    },
    series: [
      {
        name: "缺陷数量",
        type: "pie",
        radius: "55%",
        center: ["50%", "60%"],
        data: [
          { value: 10, name: "缺陷一" },
          { value: 15, name: "缺陷二" },
          { value: 25, name: "缺陷三" },
          { value: 30, name: "缺陷四" },
          { value: 20, name: "缺陷五" },
        ],
        itemStyle: {
          normal: {
            color: function (params) {
              // 根据数据项的 index 返回颜色
              var colorList = [
                "#5470C6",
                "#EC7062",
                "#FAC858",
                "#7ED3C6",
                "#8CD570",
              ];
              return colorList[params.dataIndex % colorList.length];
            },
          },
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0, 0.5)",
          },
        },
      },
    ],
  };
  let unqualifiedOption = {
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b}: {c} ({d}%)",
    },
    legend: {
      top: "5%",
      left: "center",
      data: ["工序一", "工序二", "工序三", "工序四", "工序五"],
    },
    series: [
      {
        name: "百分比",
        type: "pie",
        radius: ["40%", "70%"],
        center: ["50%", "60%"],
        data: [
          { value: 18, name: "工序一" },
          { value: 25, name: "工序二" },
          { value: 30, name: "工序三" },
          { value: 20, name: "工序四" },
          { value: 7, name: "工序五" },
        ],
        itemStyle: {
          normal: {
            color: function (params) {
              // 根据数据项的 index 返回颜色
              var colorList = [
                "#5470C6",
                "#EC7062",
                "#FAC858",
                "#7ED3C6",
                "#8CD570",
              ];
              return colorList[params.dataIndex % colorList.length];
            },
          },
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  };
  let qualityOption = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {
      data: ["合格", "不合格"],
      bottom: "2%", // 将图例放在底部中间
      left: "center", // 图例居中对齐
    },
    xAxis: {
      type: "category",
      data: [
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
        "星期日",
      ],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "合格",
        type: "bar",
        data: [5, 19, 10, 28, 12, 23, 8],
        itemStyle: {
          color: "#65D0B2", // 合格数据的颜色
        },
      },
      {
        name: "不合格",
        type: "bar",
        data: [7, 4, 2, 8, 4, 7, 3],
        itemStyle: {
          color: "#EC6861", // 不合格数据的颜色
        },
      },
    ],
  };
  taskChart.setOption(option);
  defect_chart.setOption(defectOption);
  unqualified_chart.setOption(unqualifiedOption);
  quality_chart.setOption(qualityOption);
});

const getIconPath = (iconName: string) => {
  return `../assets/icons/${iconName}.png`;
};
</script>

<style scoped lang="scss">
.home-container {
  padding: 20px;
  .top-container {
    display: flex;
    flex-wrap: nowrap;
  }
}

.home-card {
  flex: 1; // 占据剩余空间
  .home-body {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .data-item {
      display: flex;
      align-items: center;
      .data-show {
        margin-left: 10px;
      }
      .icon {
        width: 55px;
        height: 55px;
        background-color: #1b9aee;
        border-radius: 50%;
        &.bg-fb6260 {
          background-color: #fb6260;
        }
        &.bg-ffa94c {
          background-color: #ffa94c;
        }
        &.bg-51d351 {
          background-color: #51d351;
        }
        &.bg-7b63ea {
          background-color: #7b63ea;
        }
      }
    }
  }
  .echarts-bom {
    width: 100%;
    height: 300px;
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.quickEntry-card {
  flex: 0.36;
  margin-left: 20px;
  .quickEntry-body {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; // 添加间距
    .quickEntry-item {
      width: calc(33.333% - 10px); // 每个项占 33.333% 的宽度，减去间距
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      margin-bottom: 10px;
    }
  }
}
.center-container {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  margin-top: 20px;
  .defect-card {
    flex: 0.25;
    .defect-body {
      width: 100%;
      height: 310px;
    }
  }
  .unqualified-card {
    flex: 0.25;
    margin-left: 20px;
    .unqualified-body {
      width: 100%;
      height: 310px;
    }
  }
  .quality-card {
    flex: 0.5;
    margin-left: 20px;
    .quality-body {
      width: 100%;
      height: 310px;
    }
  }
}
.bottom-container {
  margin-top: 20px;
  display: flex;
  .process-card {
    flex: 0.65;
  }
  .notice-card {
    flex: 0.35;
    margin-left: 20px;
  }
}
</style>